<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Problems</title>
  <!-- <link rel="stylesheet" type="text/css" href="/lib/semantic-ui/semantic.min.css" /> -->
  <link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.min.css" rel="stylesheet">
  <!-- <script src="/lib/jquery-3.2.1.min.js"></script> -->
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <!-- <script src="/lib/semantic-ui/semantic.min.js"></script> -->
  <script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.min.js"></script>
  <!-- <script src="/lib/vue.js"></script> -->
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
  <!-- <script src="/lib/axios.min.js"></script> -->
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
  <script src="/js/util.js"></script>
  <script src="/js/components.js"></script>
</head>

<body>
  <div id="app">
    <my-header v-bind:userinfo='userinfo'></my-header>

    <div class="ui main container">
      <h1 class="ui header" style="color:transparent">UI</h1>
      <br/>

      <view-loader v-if='loading'></view-loader>
      <view-404 v-if='is404'></view-404>

      <template v-if='!loading &amp;&amp; !is404'>
        <h1 class="ui header">{{ title }}</h1>

        <div class="ui fluid icon input">
          <input type="text" placeholder="搜索题目" />
          <i class="search icon"></i>
        </div>



        <table class="ui celled striped table">
          <thead>
            <tr>
              <th class="two wide">题目编号</th>
              <th class="twelve wide">标题</th>
              <th class="one wide">正确</th>
              <th class="one wide">提交</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in list">
              <td> {{ item.id }} </td>
              <td>
                <a :href="'/problem/'+item.id"> {{ item.title }}</a>
              </td>

              <td>{{ item.acceptNum==null?0:item.acceptNum }}</td>

              <td>{{ item.submitNum==null?0:item.submitNum }}</td>
            </tr>
          </tbody>
        </table>

        <!-- <my-pager></my-pager> -->
      </template>

    </div>
    <auth-modal v-bind:errorinfo='errorinfo'></auth-modal>
    <my-footer></my-footer>
  </div>
  <script>

    var ld = {
      id: 0,
      title: '',
      list: [],
      userinfo: {},
      loading: true,
      is404: false,
      errorinfo: {
        type: 0,
        msg: ''
      }
    };

    axios.get('/api/u/info', {
      headers: { 'Access-Token': window.localStorage.getItem('token') }
    })
      .then(function (response) {
        ld.userinfo = response.data.data
      })
      .catch(function (error) {
        if (/50\d/.test(error.response.status)) {
          ld.errorinfo.type = 500;
        } else {
          ld.errorinfo.type = 400;
          ld.errorinfo.msg = error.response.data.msg;
        }
        $('.ui.basic.modal').modal('show');
        $(":root").delay(3000).queue(function () {
          $('.ui.basic.modal').modal('hide');
          window.location.href = "/login";
        });
      })

    var pathId = getPathId();
    var listDataApi = '/api/t/' + pathId;
    if (pathId == null) {
      listDataApi = '/api/p';
    }
    axios.get(listDataApi, {
      headers: { 'Access-Token': window.localStorage.getItem("token") }
    })
      .then(function (response) {
        //TODO 系統異常處理
        data = response.data.data;
        ld.list = data.problemListItemVos;
        ld.id = data.id;
        ld.title = data.title;
        ld.loading = false;
      })
      .catch(function (error) {
        ld.loading = false;
        if (error.response.status === 404) {
          ld.is404 = true;
        } else {
          console.log(error.response.status);
        }

      });
    var vm = new Vue({
      el: '#app',
      data: ld
    })


  </script>

</body>

</html>